<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>


    <!-- 通过添加 .lead 类可以让段落突出显示。(字体变粗，变大) -->
    <!-- 无.lead -->
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
    <!-- 有.lead -->
    <!-- mark起到标记作用 -->
    <!-- ins插入的部分，加一条下划线 -->
    <!-- del删除的部分。中间有划线 -->
    <!-- s 无用的部分，样式跟del差不多-->
    <p class="lead">Vivamus sagittis <s>lacus vel</s> augue laoreet <mark>highlight</mark>rutrum <del>faucibus dolor auctor.</del> Duis mollis, <ins>est non</ins> commodo luctus.</p>

    <!-- 当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。 -->
    <abbr title="attribute">HTML</abbr>
    <!-- 为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。 -->
    <abbr title="attribute" class="initialism">HTML</abbr>

    <!-- 让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。 -->
    <address>
      <strong>Twitter, Inc.</strong><br>
      1355 Market Street, Suite 900<br>
      San Francisco, CA 94103<br>
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>

    <address>
      <strong>Full Name</strong><br>
      <a href="mailto:#">first.last@example.com</a>
    </address>

    <!-- 引用
    将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。 -->
    <blockquote>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

     <!-- 添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。 -->
     <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

    <!-- 通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。 -->
    <blockquote class="blockquote-reverse">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        Someone famous in <cite title="Source Title">Source Title</cite>
      </footer>
    </blockquote>




    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  </body>
</html>